<script setup lang="ts">
import { ref, defineOptions } from 'vue'
import TopTitle from '@/components/TopTitle.vue'
import { showToast } from 'vant';
import { user } from '@/store/storeName'
import PersonCard from '@/components/Person/PersonCard.vue';
import { useRouter } from 'vue-router';
const store = user();
const router = useRouter()
/**
 * 退出登录
 */
const exit = () => {
    store.exit();
    showToast("退出成功!")
    router.back()
}
</script>
<template>
    <div id="setBox">
        <TopTitle :flag="true" name="设置"></TopTitle>
        <div class="toChangeMsg" @click="$router.push('/changeMsg')">
            <div class="left">修改信息</div>
            <img src="@/assets/Person/book_shalfxiaojiantou.png" alt="" class="right">
        </div>
        <div class="btn">
            <van-button color="#c9c8c8" @click="exit" type="primary" size="large">退出登录</van-button>
        </div>
    </div>
</template>

<style scoped lang='less'>
#setBox {
    min-height: 100vh;
    position: relative;

    .toChangeMsg {
        width: 100%;
        box-sizing: border-box;
        background-color: white;
        padding: 3vw 5vw;
        display: flex;
        justify-content: space-between;


    }

    .btn {
        width: 93%;
        margin: 0 auto;
        margin-top: 74vh;
    }
}
</style>